<template>
	<view class="add-shopcar">
		<view class="product-info">
			<image class="product-image" :src="product.image" mode="aspectFill"></image>
			<view class="product-details">
				<text class="product-name">{{ product.name }}</text>
				<text class="product-price">¥{{ product.price }}</text>
				<text class="product-desc">{{ product.description }}</text>
			</view>
		</view>
		
		<view class="specification-section">
			<text class="section-title">规格选择</text>
			<view class="spec-list">
				<view 
					v-for="spec in specifications" 
					:key="spec.id"
					class="spec-item"
					:class="{ active: selectedSpec === spec.id }"
					@click="selectSpec(spec.id)"
				>
					<text>{{ spec.name }}</text>
					<text class="spec-price">+¥{{ spec.price }}</text>
				</view>
			</view>
		</view>
		
		<view class="quantity-section">
			<text class="section-title">数量</text>
			<view class="quantity-control">
				<button class="btn-minus" @click="decreaseQuantity">-</button>
				<text class="quantity">{{ quantity }}</text>
				<button class="btn-plus" @click="increaseQuantity">+</button>
			</view>
		</view>
		
		<view class="bottom-bar">
			<view class="total-price">
				<text>合计：</text>
				<text class="price">¥{{ totalPrice }}</text>
			</view>
			<button class="add-btn" @click="addToCart">加入购物车</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 模拟商品数据
const product = ref({
	id: 1,
	name: '经典拿铁咖啡',
	price: 28,
	image: '/static/goods/goods16.jpg',
	description: '精选咖啡豆，香醇浓郁'
})

const specifications = ref([
	{ id: 1, name: '标准杯', price: 0 },
	{ id: 2, name: '大杯', price: 5 },
	{ id: 3, name: '超大杯', price: 8 }
])

const selectedSpec = ref(1)
const quantity = ref(1)

const totalPrice = computed(() => {
	const spec = specifications.value.find(s => s.id === selectedSpec.value)
	return (product.value.price + spec.price) * quantity.value
})

const selectSpec = (specId) => {
	selectedSpec.value = specId
}

const increaseQuantity = () => {
	quantity.value++
}

const decreaseQuantity = () => {
	if (quantity.value > 1) {
		quantity.value--
	}
}

const addToCart = () => {
	uni.showToast({
		title: '已加入购物车',
		icon: 'success'
	})
	setTimeout(() => {
		uni.navigateBack()
	}, 1500)
}
</script>

<style scoped>
.add-shopcar {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.product-info {
	display: flex;
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.product-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 12rpx;
}

.product-details {
	flex: 1;
	margin-left: 20rpx;
	display: flex;
	flex-direction: column;
}

.product-name {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.product-price {
	font-size: 36rpx;
	color: #ff6b6b;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.product-desc {
	font-size: 24rpx;
	color: #999;
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: block;
}

.specification-section,
.quantity-section {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.spec-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.spec-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border: 2rpx solid #eee;
	border-radius: 12rpx;
	transition: all 0.3s;
}

.spec-item.active {
	border-color: #ff6b6b;
	background-color: #fff5f5;
}

.spec-price {
	color: #ff6b6b;
	font-weight: bold;
}

.quantity-control {
	display: flex;
	align-items: center;
	gap: 30rpx;
}

.btn-minus,
.btn-plus {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	border: none;
}

.quantity {
	font-size: 32rpx;
	font-weight: bold;
	min-width: 80rpx;
	text-align: center;
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	border-top: 1rpx solid #eee;
}

.total-price {
	display: flex;
	align-items: baseline;
}

.total-price text:first-child {
	font-size: 28rpx;
	color: #666;
}

.price {
	font-size: 36rpx;
	color: #ff6b6b;
	font-weight: bold;
	margin-left: 10rpx;
}

.add-btn {
	background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
	color: white;
	border: none;
	border-radius: 50rpx;
	padding: 20rpx 60rpx;
	font-size: 28rpx;
	font-weight: bold;
}
</style>